<template>
  <div class="box">
    <!-- <lb-table
      :column="tableData.column"
      :data="tableData.data"
      :span-method="arraySpanMethod"
      border
    >
    </lb-table>

    <lb-table
      :column="tableData.column"
      :data="tableData.data"
      :span-method="objectSpanMethod"
      style="margin-top: 20px"
      border
    >
    </lb-table> -->

    <!-------------------- 多级表头 -------------------->
    <lb-table :data="tableData" highlight-current-row> </lb-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // tableData: {
      //   column: [
      //     {
      //       prop: "value0",
      //       label: "日期",
      //       align: "center",
      //       fixed: true,
      //       // width: '120',
      //       renderHeader: (h, scope) => {
      //         return <span>{scope.column.label}</span>;
      //       },
      //     },
      //     {
      //       label: "灌装水臭氧机操作记录",
      //       align: "center",
      //       children: [
      //         {
      //           prop: "value1",
      //           align: "center",
      //           label: "设备运行是否正常",
      //           options: [
      //             {
      //               dictLabel: "正常",
      //               dictValue: "0",
      //             },
      //             {
      //               dictLabel: "停用",
      //               dictValue: "1",
      //             },
      //           ],
      //           // width: "120",
      //         },
      //         {
      //           prop: "value2",
      //           align: "center",
      //           label: "三级过滤压差（≤0.1mpa）",
      //           // width: "120",
      //         },
      //         {
      //           prop: "value3",
      //           align: "center",
      //           label: "电流(A)",
      //           // width: "120",
      //         },
      //         {
      //           prop: "value4",
      //           align: "center",
      //           label: "O2流量（L/min)",
      //           // width: "120",
      //         },
      //         {
      //           prop: "value5",
      //           align: "center",
      //           label: "臭氧浓度(mg/L)",
      //           // width: "120",
      //         },
      //       ],
      //     },
      //     {
      //       label: "冲盖水臭氧机操作记录",
      //       children: [
      //         {
      //           prop: "value6",
      //           align: "center",
      //           label: "设备运行是否正常",
      //           options: [
      //             {
      //               dictLabel: "正常",
      //               dictValue: "0",
      //             },
      //             {
      //               dictLabel: "停用",
      //               dictValue: "1",
      //             },
      //           ],
      //           // width: "120",
      //         },
      //         {
      //           prop: "value7",
      //           align: "center",
      //           label: "三级过滤压差（≤0.1mpa）",
      //           // width: "120",
      //         },
      //         {
      //           prop: "value8",
      //           align: "center",
      //           label: "水流量（T/H)",
      //           // width: "120",
      //         },
      //         {
      //           prop: "value9",
      //           align: "center",
      //           label: "O2流量（L/min)",
      //           // width: "120",
      //         },
      //       ],
      //     },
      //     {
      //       label: "CO2添加记录",
      //       children: [
      //         {
      //           prop: "value10",
      //           align: "center",
      //           label: "水流量（T/H)",
      //           // width: "120",
      //         },
      //         {
      //           prop: "value11",
      //           align: "center",
      //           label: "CO2流量（L/min)",
      //           // width: "120",
      //         },
      //       ],
      //     },
      //     {
      //       prop: "value12",
      //       align: "center",
      //       label: "碳滤后余氯含量(mg/L)",
      //       // width: "120",
      //     },
      //     {
      //       label: "取水、供水情况",
      //       children: [
      //         {
      //           prop: "value13",
      //           align: "center",
      //           label: "项目",
      //           // width: "120",
      //         },
      //         {
      //           prop: "value14",
      //           align: "center",
      //           label: "1#储水罐",
      //           // width: "120",
      //         },
      //         {
      //           prop: "value15",
      //           align: "center",
      //           label: "2#储水罐",
      //           // width: "120",
      //         },
      //       ],
      //     },
      //   ],
      //   data: [
      //     {
      //       value0: "2012-21-31",
      //       value1: 0,
      //       value2: "2",
      //       value3: "3",
      //       value4: "4",
      //       value5: "5",
      //       value6: 0,
      //       value7: "7",
      //       value8: "8",
      //       value9: "9",
      //       value10: "10",
      //       value11: "11",
      //       value12: "12",
      //       value13: "13",
      //       value14: "14",
      //       value15: "15",
      //     },
      //     {
      //       value0: "2012-21-31",
      //       value1: 1,
      //       value2: "2",
      //       value3: "3",
      //       value4: "4",
      //       value5: "5",
      //       value6: 1,
      //       value7: "7",
      //       value8: "8",
      //       value9: "9",
      //       value10: "10",
      //       value11: "11",
      //       value12: "12",
      //       value13: "13",
      //       value14: "14",
      //       value15: "15",
      //     },
      //     {
      //       value0: "2012-21-31",
      //       value1: 0,
      //       value2: "2",
      //       value3: "3",
      //       value4: "4",
      //       value5: "5",
      //       value6: 0,
      //       value7: "7",
      //       value8: "8",
      //       value9: "9",
      //       value10: "10",
      //       value11: "11",
      //       value12: "12",
      //       value13: "13",
      //       value14: "14",
      //       value15: "15",
      //     },
      //   ],
      // },
      tableData: {
        column: [
          {
            prop: "value0",
            label: "日期",
            align: "center",
            // fixed: true,
            // width: '120',
            renderHeader: (h, scope) => {
              return <span>{scope.column.label}</span>;
            },
          },
          {
            label: "灌装水臭氧机操作记录",
            align: "center",
            children: [
              {
                prop: "value1",
                align: "center",
                label: "设备运行是否正常",
                options: [
                  {
                    dictLabel: "正常",
                    dictValue: "0",
                  },
                  {
                    dictLabel: "停用",
                    dictValue: "1",
                  },
                ],
                // width: "120",
              },
              {
                prop: "value2",
                align: "center",
                label: "三级过滤压差（≤0.1mpa）",
                // width: "120",
              },
              {
                prop: "value3",
                align: "center",
                label: "电流(A)",
                // width: "120",
              },
              {
                prop: "value4",
                align: "center",
                label: "O2流量（L/min)",
                // width: "120",
              },
              {
                prop: "value5",
                align: "center",
                label: "臭氧浓度(mg/L)",
                // width: "120",
              },
            ],
          },
          {
            label: "冲盖水臭氧机操作记录",
            children: [
              {
                prop: "value6",
                align: "center",
                label: "设备运行是否正常",
                options: [
                  {
                    dictLabel: "正常",
                    dictValue: "0",
                  },
                  {
                    dictLabel: "停用",
                    dictValue: "1",
                  },
                ],
                // width: "120",
              },
              {
                prop: "value7",
                align: "center",
                label: "三级过滤压差（≤0.1mpa）",
                // width: "120",
              },
              {
                prop: "value8",
                align: "center",
                label: "水流量（T/H)",
                // width: "120",
              },
              {
                prop: "value9",
                align: "center",
                label: "O2流量（L/min)",
                // width: "120",
              },
            ],
          },
          {
            label: "CO2添加记录",
            children: [
              {
                prop: "value10",
                align: "center",
                label: "水流量（T/H)",
                // width: "120",
              },
              {
                prop: "value11",
                align: "center",
                label: "CO2流量（L/min)",
                // width: "120",
              },
            ],
          },
          {
            prop: "value12",
            align: "center",
            label: "碳滤后余氯含量(mg/L)",
            // width: "120",
          },
          {
            label: "取水、供水情况",
            children: [
              {
                prop: "value13",
                align: "center",
                label: "项目",
                // width: "120",
              },
              {
                prop: "value14",
                align: "center",
                label: "1#储水罐",
                // width: "120",
              },
              {
                prop: "value15",
                align: "center",
                label: "2#储水罐",
                // width: "120",
              },
            ],
          },
        ],
        data: [
          {
            value0: "2012-21-31",
            value1: 0,
            value2: "2",
            value3: "3",
            value4: "4",
            value5: "5",
            value6: 0,
            value7: "7",
            value8: "8",
            value9: "9",
            value10: "10",
            value11: "11",
            value12: "12",
            value13: "13",
            value14: "14",
            value15: "15",
          },
          {
            value0: "2012-21-31",
            value1: 1,
            value2: "2",
            value3: "3",
            value4: "4",
            value5: "5",
            value6: 1,
            value7: "7",
            value8: "8",
            value9: "9",
            value10: "10",
            value11: "11",
            value12: "12",
            value13: "13",
            value14: "14",
            value15: "15",
          },
          {
            value0: "2012-21-31",
            value1: 0,
            value2: "2",
            value3: "3",
            value4: "4",
            value5: "5",
            value6: 0,
            value7: "7",
            value8: "8",
            value9: "9",
            value10: "10",
            value11: "11",
            value12: "12",
            value13: "13",
            value14: "14",
            value15: "15",
          },
        ],
      },
    };
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column, rowIndex, columnIndex);
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          // return [2, 2];
        }
      }
      // if (rowIndex === 0) {
      if (columnIndex <= 0) {
        return [1, 2];
      }
      // }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 10px;
}
/*滚动条样式*/
.box::-webkit-scrollbar {
  width: 7px !important;
  height: 7px !important;
  cursor: pointer !important;
}

.box::-webkit-scrollbar-thumb {
  border-radius: 7px !important;
  -webkit-box-shadow: inset 0 0 7px rgba(33, 117, 255, 0.2) !important;
  background: rgba(4, 162, 253, 0.5) !important;
  cursor: pointer !important;
}

.box::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 7px rgba(33, 117, 255, 0.2) !important;
  border-radius: 7px !important;
  background: rgba(33, 117, 255, 0.2) !important;
  cursor: pointer !important;
}
</style>>

